<template>
  <view class="custom-tab-bar">
    <view class="tab-container">
      <view 
        v-for="(item, index) in tabList" 
        :key="index"
        class="tab-item"
        :class="{ active: currentIndex === index }"
        @click="switchTab(index)"
      >
        <uni-icons 
          :type="item.icon" 
          :size="24" 
          :color="currentIndex === index ? '#ffffff' : '#999999'"
        />
        <text class="tab-text" :class="{ active: currentIndex === index }">
          {{ item.text }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabBar',
  props: {
    currentIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabList: [
        {
          icon: 'home-filled',
          text: '创作中心',
          pagePath: '/pages/index/index'
        },
        {
          icon: 'scan',
          text: 'AI看展',
          pagePath: '/pages/ai-explore/ai-explore'
        },
        {
          icon: 'location-filled',
          text: '艺术足迹',
          pagePath: '/pages/footprint/footprint'
        },
        {
          icon: 'person-filled',
          text: '我的',
          pagePath: '/pages/profile/profile'
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      if (index === this.currentIndex) return;
      
      // 特殊处理AI看展功能
      if (index === 1) {
        this.openAIExplore();
        return;
      }
      
      const targetPage = this.tabList[index].pagePath;
      
      // 使用uni.reLaunch进行页面跳转，确保底部导航栏正常显示
      uni.reLaunch({
        url: targetPage
      });
      
      this.$emit('change', index);
    },
    
    openAIExplore() {
      console.log('开始打开AI看展功能');
      
      // 检测是否在开发者工具中
      const isDevTools = this.isDevTools();
      console.log('是否在开发者工具中:', isDevTools);
      
      if (isDevTools) {
        // 开发者工具环境，直接跳转到分析页面，使用预设图片
        this.handleDevToolsMode();
      } else {
        // 真机环境，显示选择菜单
        this.showImageOptions();
      }
    },
    
    showImageOptions() {
      uni.showActionSheet({
        itemList: ['拍照', '从相册选择', '使用预设图片'],
        itemHeight: 60, // 增加选项高度
        success: (res) => {
          console.log('用户选择:', res.tapIndex);
          switch(res.tapIndex) {
            case 0: // 拍照
              this.chooseImageFromCamera();
              break;
            case 1: // 从相册选择
              this.chooseImageFromAlbum();
              break;
            case 2: // 使用预设图片
              this.usePresetImage();
              break;
          }
        },
        fail: (err) => {
          console.log('用户取消选择:', err);
        }
      });
    },
    
    chooseImageFromCamera() {
      uni.chooseImage({
        count: 1,
        sourceType: ['camera'], // 只允许拍照
        success: (res) => {
          console.log('拍照成功:', res);
          this.handleImageSelected(res);
        },
        fail: (err) => {
          console.error('拍照失败:', err);
          uni.showToast({ 
            title: `拍照失败: ${err.errMsg || '未知错误'}`, 
            icon: 'none',
            duration: 3000
          });
        }
      });
    },
    
    chooseImageFromAlbum() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'], // 只允许从相册选择
        success: (res) => {
          console.log('相册选择成功:', res);
          this.handleImageSelected(res);
        },
        fail: (err) => {
          console.error('相册选择失败:', err);
          uni.showToast({ 
            title: `选择图片失败: ${err.errMsg || '未知错误'}`, 
            icon: 'none',
            duration: 3000
          });
        }
      });
    },
    
    usePresetImage() {
      console.log('使用预设图片');
      // 直接跳转到分析页面，不传递图片参数（使用预设图片）
      uni.navigateTo({
        url: '/pages/ai-explore/analysis-input',
        success: (navRes) => {
          console.log('使用预设图片跳转成功:', navRes);
          uni.showToast({
            title: '使用预设图片进行分析',
            icon: 'success',
            duration: 2000
          });
        },
        fail: (navErr) => {
          console.error('跳转失败:', navErr);
          uni.showToast({ 
            title: '页面跳转失败', 
            icon: 'none' 
          });
        }
      });
    },
    
    handleImageSelected(res) {
      const filePath = res.tempFilePath || res.tempFilePaths?.[0];
      if (!filePath) {
        console.error('未获取到图片路径');
        uni.showToast({ 
          title: '未获取到图片路径', 
          icon: 'none' 
        });
        return;
      }
      
      console.log('准备跳转到分析页面，图片路径:', filePath);
      
      // 跳转到AI分析页面，携带选择的图片
      uni.navigateTo({
        url: `/pages/ai-explore/analysis-input?imageUrl=${encodeURIComponent(filePath)}`,
        success: (navRes) => {
          console.log('页面跳转成功:', navRes);
        },
        fail: (navErr) => {
          console.error('页面跳转失败:', navErr);
          uni.showToast({ 
            title: '页面跳转失败', 
            icon: 'none' 
          });
        }
      });
    },
    
    isDevTools() {
      // 检测是否在开发者工具中
      try {
        // 方法1：检测userAgent
        const userAgent = navigator.userAgent || '';
        if (userAgent.includes('webview') || userAgent.includes('devtools')) {
          return true;
        }
        
        // 方法2：检测uni环境
        if (typeof uni !== 'undefined' && uni.getSystemInfoSync) {
          const systemInfo = uni.getSystemInfoSync();
          // 开发者工具通常platform为devtools
          if (systemInfo.platform === 'devtools') {
            return true;
          }
        }
        
        return false;
      } catch (error) {
        console.log('检测开发者工具失败:', error);
        return false;
      }
    },
    
    handleDevToolsMode() {
      console.log('开发者工具模式：直接跳转到分析页面');
      uni.showModal({
        title: '开发者工具模式',
        content: '当前在开发者工具中，将使用预设图片进行演示。真机环境下会正常弹出图片选择器。',
        showCancel: false,
        confirmText: '确定',
        success: () => {
          // 直接跳转到分析页面，不传递图片参数（使用预设图片）
          uni.navigateTo({
            url: '/pages/ai-explore/analysis-input',
            success: (navRes) => {
              console.log('开发者工具模式页面跳转成功:', navRes);
            },
            fail: (navErr) => {
              console.error('开发者工具模式页面跳转失败:', navErr);
              uni.showToast({ 
                title: '页面跳转失败', 
                icon: 'none' 
              });
            }
          });
        }
      });
    },
    
  }
}
</script>

<style lang="scss" scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  
  .tab-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 280px;
    height: 60px;
    background: #333333;
    border-radius: 30px;
    border: 1px solid #444444;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 0 20px;
    
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 20px;
      transition: all 0.3s ease;
      cursor: pointer;
      
      &.active { background: transparent; transform: none; box-shadow: none; }
      
      &:active {
        transform: translateY(0px);
        background: transparent;
      }
      
      .tab-text {
        font-size: 12px;
        color: #999999;
        margin-top: 4px;
        font-family: 'Fugaz One', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &.active { color: #ffffff; font-weight: 600; }
      }
    }
  }
}

/* 适配不同屏幕尺寸 */
@media screen and (max-width: 375px) {
  .custom-tab-bar .tab-container {
    width: 260px;
    height: 55px;
    
    .tab-item {
      padding: 6px 10px;
      
      .tab-text {
        font-size: 11px;
      }
    }
  }
}

@media screen and (min-width: 414px) {
  .custom-tab-bar .tab-container {
    width: 300px;
    height: 65px;
    
    .tab-item {
      padding: 10px 14px;
      
      .tab-text {
        font-size: 13px;
      }
    }
  }
}
</style>